<template>
  <div class="team-setting">
    <template v-if="showPage">
      <template v-if="notMember">
        <div class="page-center">
          <div style="padding-top: 40px">
            <a-card :bordered="false" style="border-radius: 6px">
              <div class="flex flex-col align-center py-30">
                <WarningFilled style="color: #faad14; font-size: 64px" />
                <div class="mt-20 fs-24">此能力仅 团队/企业 成员可用</div>
                <div class="mt-10 text-gray-6">当前身份：个人</div>
                <a-row class="mt-20 flex justify-center">
                  <a-button
                    type="primary"
                    style="border-radius: 6px"
                    @click="showMemberVisible = true"
                  >
                    <template #icon><SwapOutlined /></template>
                    切换 团队/企业
                  </a-button>
                  <a-button
                    type="primary"
                    class="ml-20"
                    style="border-radius: 6px"
                    @click="addTeamVisible = true"
                  >
                    <template #icon><PlusCircleOutlined /></template>
                    创建 团队/企业
                  </a-button>
                </a-row>
              </div>
            </a-card>
          </div>
        </div>
      </template>
      <template v-else>
        <a-layout style="width: 100%; height: 100%">
          <a-layout-sider width="200" style="background: #fff">
            <div class="left-side">
              <div
                class="menu hide-scroller-bar"
                :style="{
                  paddingBottom: $utils.isLogin()
                    ? isNotVip
                      ? '150px'
                      : '120px'
                    : '',
                }"
              >
                <a-menu
                  mode="inline"
                  v-model:selectedKeys="selectedMenu"
                  :style="{ height: '100%', borderRight: 0 }"
                  @click="handleMenuClick"
                >
                  <a-menu-item v-for="item of menuList" :key="item.key">
                    <div style="display: flex; align-items: center">
                      <cu-icon
                        :type="item.icon"
                        style="font-size: 16px"
                      ></cu-icon>
                      <span>{{ item.title }}</span>
                    </div>
                  </a-menu-item>
                </a-menu>
              </div>

              <div class="side-footer">
                <!-- <div class="activate-vip-wrap" v-if="isNotVip">
                  <div class="activate-vip" @click="toActiveVip">
                    <cu-icon
                      class="icon card-icon"
                      type="icon-Member"
                      style="font-size: 20px; margin-right: 5px"
                    ></cu-icon>
                    <span>升级会员</span>
                  </div>
                </div> -->
                <div class="change-team-wrap" v-if="$utils.isLogin()">
                  <a-popover
                    placement="rightBottom"
                    overlayClassName="workGpt-team-pop"
                    :visible="teamPopoverVisible"
                    @visibleChange="handleHoverChange"
                    trigger="hover"
                  >
                    <template #content>
                      <team-slider
                        @addTeam="addTeam"
                        @addNewTeam="teamPopoverVisible = false"
                      ></team-slider>
                    </template>
                    <div class="user-team">
                      <div class="user-team-left">
                        <img
                          :src="currentTeam.avatar"
                          alt=""
                          class="user-team-avatar"
                          v-if="currentTeam.avatar"
                        />
                        <div class="user-team-avatar-box" v-else>
                          {{
                            currentTeam.name && currentTeam.name.length > 0
                              ? currentTeam.name.slice(0, 1)
                              : ""
                          }}
                        </div>
                        <div>
                          <div>
                            {{ currentTeam.name || "-" }}
                          </div>
                          <a-tag
                            color="blue"
                            style="border-radius: 4px; margin-top: 5px"
                            v-if="currentTeam.id"
                          >
                            团队/企业
                          </a-tag>
                          <a-tag
                            color="green"
                            style="border-radius: 4px; margin-top: 5px"
                            v-else
                            >个人</a-tag
                          >
                        </div>
                      </div>
                      <SwapOutlined
                        class="user-trigger-icon"
                        v-if="teamList.length > 0"
                      />
                    </div>
                  </a-popover>
                </div>
              </div>
            </div>
          </a-layout-sider>
          <a-layout-content class="right hide-scroller-bar">
            <router-view v-slot="{ Component }">
              <component :is="Component" />
            </router-view>
          </a-layout-content>
        </a-layout>
      </template>
    </template>

    <!-- 切换团队、企业 -->
    <a-modal
      :title="'选择' + (showMemberBusiness ? '企业' : '团队')"
      :width="500"
      :visible="showMemberVisible"
      @cancel="showMemberVisible = false"
      :footer="false"
      centered
      :zIndex="1002"
    >
      <team-slider
        @addTeam="addTeamCallback"
        :team="showMemberTeam"
        :business="showMemberBusiness"
        height="400px"
        @change="onTeamChange"
      ></team-slider>
    </a-modal>

    <AddTeam
      :visible="addTeamVisible"
      @onClose="addTeamVisible = false"
      @success="addTeamSuccess"
    />

    <InviteMember
      :visible="inviteMemberVisible"
      @onClose="inviteMemberVisible = false"
    />

    <LoginModal
      :visible="loginVisible"
      @onClose="loginVisible = false"
      @loginCallback="loginCallback"
    />
  </div>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  computed,
  watch,
  toRaw,
  h,
  onBeforeUnmount,
  createVNode,
  ref,
  nextTick,
  inject,
  provide,
} from "vue";
import request from "../../common/utils/request";
import store from "../../store/index";
import { useRoute, useRouter } from "vue-router";
import utils from "../../common/utils/utils";
import { Form, Modal, notification, message } from "ant-design-vue";
import {
  WarningFilled,
  SwapOutlined,
  PlusCircleOutlined,
  PlusOutlined,
  ExclamationCircleOutlined,
  UserAddOutlined,
} from "@ant-design/icons-vue";
import AddTeam from "../../components/AddTeam/index.vue";
import InviteMember from "../../components/InviteMember/index.vue";
import TeamSlider from "@/components/TeamSlider/index.vue";

const useForm = Form.useForm;
export default defineComponent({
  name: "TeamSetting",
  components: {
    WarningFilled,
    SwapOutlined,
    PlusCircleOutlined,
    AddTeam,
    // PlusOutlined,
    // UserAddOutlined,
    InviteMember,
    TeamSlider,
  },

  setup() {
    const route = useRoute();
    const router = useRouter();

    const state = reactive({
      isManager: 1,//1管理者 0 使用者
      
      showPage: false,
      notMember: false,
      selectedMenu: ["TrainingAppList"],

      addTeamVisible: false,
      loginVisible: false,
      inviteMemberVisible: false,
      showMemberVisible: false,
      isBusiness: 0,
      showMemberTeam: true,
      showMemberBusiness: true,
      isNotVip: false,
      teamList: [],
      currentTeam: {},

      menuList: [
        {
          key: "TrainingAppList",
          title: "机器人",
          icon: "icon--_moxingxunlian",
        },
        {
          key: "TrainingKnowledgeBase",
          title: "知识库",
          icon: "icon-zhishiku10",
        },
        {
          key: "TrainingMembers",
          title: "成员管理",
          icon: "icon-chengyuan",
        },
        {
          key: "TrainingInfo",
          title: "企业设置",
          icon: "icon-shezhitianchong",
        },
      ],
    });

    const addTeamSuccess = () => {
      state.addTeamVisible = false;
      init();
    };

    const getTeamList = () => {
      request.get("/work_ai", "/user/team/list", {}).then((res) => {
        state.teamList = res.list;
        utils.getUserInfo().then((userInfo) => {
          let item = {
            id: 0,
            name: "个人",
          };
          if (userInfo.avatar) {
            item.name = userInfo.nickname;
            item.avatar = userInfo.avatar;
          }
          state.teamList.unshift(item);
        });
      });
    };

    const getCurrentTeam = () => {
      let teamId = store.state.user.teamId;

      if (teamId) {
        request.get("/work_ai", "/user/team", { id: teamId }).then((res) => {
        
          state.currentTeam = res.detail;
        
          if(res?.teamUser?.power==0){
              state.menuList = state.menuList.slice(0,1)
              store.commit("SET_USER_IDENTITY", 0);
          }else{
            store.commit("SET_USER_IDENTITY", res?.teamUser?.power??1);
          }
        });
      } else {
        state.currentTeam = {
          id: 0,
          name: "个人",
        };
        utils.getUserInfo().then((userInfo) => {
          if (userInfo.avatar) {
            state.currentTeam.name = userInfo.nickname;
            state.currentTeam.avatar = userInfo.avatar;
          }
        });
      }
    };

    const getPackageInfo = () => {
      request.get("/work_ai", "/user/package/info").then((res) => {
        if (res.list) {
          if (res.list.end_date) {
            state.isNotVip = false;
          } else {
            state.isNotVip = true;
          }
        }
      });
    };

    const init = () => {
      utils.checkLogin().then((isLogin) => {
        if (!isLogin) {
          state.loginVisible = true;
          return;
        }

        getTeamList();
        getCurrentTeam();
        getPackageInfo();
        state.showPage = true;
        if (store.state.user.teamId) {
          state.notMember = false;
        } else {
          state.notMember = true;
        }
        if (route.name == "TrainingSetting") {
          router.push({ name: "TrainingAppList" });
        } else {
          if (
            route.name == "TrainingAppDetail" &&
            route.meta.parentRouteAlias
          ) {
            state.selectedMenu = [route.meta.parentRouteAlias];
          } else {
            state.selectedMenu = [route.name];
          }
        }
      });
    };

    init();

    watch(
      () => store.state.user.teamId,
      (val) => {
        teamPopoverVisible.value = false;
        init();
      }
    );

    const loginCallback = () => {
      state.loginVisible = false;
      router.go(0);
    };

    const addTeamCallback = (is_business) => {
      state.addTeamVisible = true;
      state.isBusiness = is_business;
    };

    const onTeamChange = (team) => {
      state.showMemberVisible = false;
    };

    const teamPopoverVisible = ref(false);

    provide("changeTeamPopoverVisible", (visible) => {
      teamPopoverVisible.value = visible;
    });

    const handleHoverChange = (visible) => {
      teamPopoverVisible.value = visible;
    };

    const addTeam = (isBusiness = 0) => {
      state.addTeamVisible = true;
      state.isBusiness = isBusiness;

      teamPopoverVisible.value = false;
    };

    // 切换菜单路由
    const handleMenuClick = ({ item, key, keyPath }) => {
      router.push({ name: key });
    };

    watch(route, () => {
      let currentMenuName = "";
      state.menuList.forEach((item) => {
        if (item.key == route.name) {
          currentMenuName = route.name;
        }
      });
      if (currentMenuName) {
        state.selectedMenu = [currentMenuName];
      } else {
        if (route.meta.parentRouteAlias) {
          state.selectedMenu = [route.meta.parentRouteAlias];
        }
      }
    });

    return {
      ...toRefs(state),
      addTeamSuccess,
      loginCallback,
      addTeamCallback,
      onTeamChange,
      handleMenuClick,
      teamPopoverVisible,
      handleHoverChange,
      addTeam,
    };
  },
});
</script>

<style lang="less" scoped>
.team-setting {
  width: 100%;
  height: 100%;

  .page-center {
    margin: 0 auto;
    max-width: 1200px;
  }

  .right {
    width: 100%;
    height: 100%;
    overflow: hidden auto;

    .right-content {
      padding: 20px;
    }
  }

  .left-side {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;

    .menu {
      flex: 1;
      overflow: hidden auto;
    }

    .side-footer {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      background-color: #fff;
      border-top: 1px solid #f5f5f5;

      .activate-vip-wrap {
        padding: 10px 15px;
        display: flex;
        justify-content: center;
        align-items: center;

        .activate-vip {
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(90deg, #7a6cfc, #f26dbe);
          color: #fff;
          border-radius: 4px;
          padding: 8px 0;
          cursor: pointer;

          &:after {
            content: "";
            height: 40px;
            width: 30px;
            display: inline-block;
            background: hsla(0, 0%, 100%, 0.2);
            position: absolute;
            left: -60px;
            top: 10px;
            z-index: 2;
            -webkit-transform: skew(-12deg);
            transform: skew(-12deg);
            -webkit-animation: light 2.5s linear infinite;
            animation: light 2.5s linear infinite;
          }
        }
      }

      .change-team-wrap {
        padding: 10px 15px 20px;
        border-right: 1px solid #f5f5f5;

        .user-team {
          background-color: #f1f1f1;
          border-radius: 4px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 5px 10px;
          cursor: pointer;

          .user-team-left {
            display: flex;
            align-items: center;

            .user-team-avatar {
              width: 36px;
              height: 36px;
              object-fit: cover;
              border-radius: 50%;
              margin-right: 10px;
            }

            .user-team-avatar-box {
              width: 36px;
              height: 36px;
              background-color: #1890ff;
              border-radius: 50%;
              margin-right: 10px;
              display: flex;
              justify-content: center;
              align-items: center;
              color: #fff;
              font-size: 16px;
            }
          }

          .user-trigger-icon {
            font-size: 16px;
            color: #666;
          }
        }
      }
    }
  }
}
</style>
